<template>
  <div
    class="orderlist kw-bottotm custom-loading-svg"
    v-loading="exportloading"
    element-loading-text="正在导出中..."
    :element-loading-svg="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
  >
    <div class="orderlist-header">
      <!-- <div class="orderlist-title">订单列表</div> -->
      <div class="orderlist-buttons">
        <el-form
          :inline="true"
          :model="keywordsform"
          class="demo-form-inline orderlist-keywords-form"
        >
          <el-form-item
            label="账号"
            v-if="keywordsform.isadmin == 1 || keywordsform.isadmin == 2"
          >
            <el-select
              v-model="keywordsform.userId"
              clearable
              placeholder="选择账号"
              class="orseruserid-selectinput"
              popper-class="orseruserid-select"
              style="width: 170px"
            >
              <el-option
                v-for="item in userdataOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              v-model="keywordsform.keyword"
              placeholder="输入关键词"
              size="default"
              style="width: 200px; font-size: 12px"
              clearable
            />
          </el-form-item>
          <el-form-item label="国内快递单号">
            <el-input
              v-model="keywordsform.expressNum"
              placeholder="输入国内快递单号"
              size="default"
              style="width: 200px; font-size: 12px"
              clearable
            />
          </el-form-item>
          <el-form-item label="拍货日期">
            <el-date-picker
              v-model="keywordsform.buygoodsDate"
              type="date"
              placeholder="选择拍货日期"
              size="default"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 150px; font-size: 13px"
            />
          </el-form-item>
          <el-form-item label="出货日期">
            <el-date-picker
              v-model="keywordsform.shippingDate"
              type="date"
              placeholder="选择出货日期"
              size="default"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 150px; font-size: 13px"
            />
          </el-form-item>
          <el-form-item label="特殊类型">
            <el-select
              v-model="keywordsform.specialtype"
              clearable
              placeholder="请选择"
              class="orseruserid-selectinput"
              popper-class="orseruserid-select"
              style="width: 170px"
            >
              <el-option
                v-for="item in specialoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveorderList">查询</el-button>
            <el-button type="primary" @click="exportExcel">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="orderlist-content" style="height: 70%">
      <el-table
        :data="orderListdata"
        class="orderlisttabel"
        :expand-row-keys="expandRowKeys"
        :row-key="(row) => row.index"
        @expand-change="handleExpandChange"
        :row-style="orderListrowStyle"
        style="width: 100%; height: 100%; font-size: 12px"
        border
      >
        <el-table-column type="expand">
          <template #default="props">
            <div class="orderlist-expand" style="width: 90%">
              <div
                class="orderlist-expand-item"
                v-for="(value, key) in orderexpandHtml(props.row)"
                :key="key"
              >
                <div class="orderlist-expand-item-title">
                  <span>{{ orderMap[key] }}：</span>
                </div>

                <div class="orderlist-expand-item-text">
                  <div v-if="orderMap[key] === '商品主图'">
                    <!-- <el-image
                      :src="imgurls(value)"
                      :preview-src-list="previewSrcList"
                      :initial-index="0"
                      style="width: 80px; cursor: pointer"
                    /> -->
                    <el-input
                      style="
                        width: 146px;
                        margin-bottom: 6px;
                        height: 20px;
                        font-size: 11px;
                      "
                      type="text"
                      placeholder="点击粘贴上传图片"
                      @paste="handlePaste"
                    />
                    <el-upload
                      v-if="value == ''"
                      drag
                      action="http://47.99.66.117:5500/api/upload"
                      list-type="picture-card"
                      :show-file-list="false"
                      class="matchingaddupload"
                      :on-success="getuploadimgsuccess2"
                    >
                      <el-icon
                        class="avatar-uploader-icon"
                        style="width: 100%; height: 100%"
                        ><Plus
                      /></el-icon>
                    </el-upload>
                    <div class="active-uploadimgs" v-if="value != ''">
                      <img
                        :src="imgurls(value)"
                        class="avatar el-upload-list__item-thumbnail"
                        style="height: 148px"
                      />
                      <el-icon
                        style="margin-left: 20px; cursor: pointer"
                        @click="props.row.goodsimg = ''"
                        ><delete
                      /></el-icon>
                    </div>
                  </div>

                  <div v-if="orderMap[key] === '其他'">
                    <div v-if="value.length == 0">
                      <el-button
                        type="success"
                        size="small"
                        @click="addother(value)"
                        >添加</el-button
                      >
                    </div>
                    <div v-else class="addexpressnum" style="display: flex">
                      <div class="addexpressnum-inputs">
                        <div
                          v-for="(item2, index) in value"
                          :key="index"
                          style="
                            margin-bottom: 5px;
                            display: flex;
                            align-items: center;
                          "
                        >
                          <el-input
                            v-model="value[index].label"
                            style="width: 50%; font-size: 12px"
                            placeholder="请输入"
                          ></el-input>
                          <div>：</div>
                          <el-input
                            v-model="value[index].value"
                            style="width: 100%; font-size: 12px"
                            placeholder="请输入"
                          ></el-input>
                        </div>
                      </div>
                      <div class="addexpressnum-button">
                        <el-button
                          type="success"
                          size="small"
                          @click="addother(value)"
                          >添加</el-button
                        >
                      </div>
                    </div>
                  </div>

                  <div v-if="orderMap[key] === '颜色尺码'">
                    <div class="orderlist-expand-other">
                      <div
                        class="expand-other-item"
                        v-for="(item, index) in value"
                        :key="index"
                      >
                        <div style="margin-top: 2px; font-size: 12px">
                          {{ item }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="orderMap[key] === '商品名称'">
                    <div class="orderlist-expand-other">
                      <div
                        class="expand-other-item"
                        v-for="(item, index) in value"
                        :key="index"
                      >
                        <div style="margin-top: 2px; font-size: 12px">
                          {{ item }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div v-if="orderMap[key] === '国内快递单号'">
                    <div v-if="value.length == 0">
                      <el-button
                        type="success"
                        size="small"
                        @click="addexpressNum2(value)"
                        >添加</el-button
                      >
                    </div>
                    <div v-else class="addexpressnum" style="display: flex">
                      <div class="addexpressnum-inputs">
                        <div
                          v-for="(item2, index) in value"
                          :key="index"
                          style="margin-bottom: 5px"
                        >
                          <el-input
                            v-model="value[index]"
                            style="width: 100%; font-size: 12px"
                            placeholder="请输入"
                          ></el-input>
                        </div>
                      </div>
                      <div class="addexpressnum-button">
                        <el-button
                          type="success"
                          size="small"
                          @click="addexpressNum2(value)"
                          >添加</el-button
                        >
                      </div>
                    </div>
                  </div>

                  <div
                    v-if="
                      orderMap[key] === '出货日期' ||
                      orderMap[key] === '拍货日期' ||
                      orderMap[key] === '结账日期'
                    "
                    style="width: 100%; height: auto; word-wrap: break-word"
                  >
                    <el-date-picker
                      v-model="props.row[key]"
                      type="date"
                      placeholder="请选择"
                      style="width: 100%; font-size: 12px"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </div>
                  <div
                    v-if="
                      orderMap[key] != '其他' &&
                      orderMap[key] != '商品主图' &&
                      orderMap[key] != '颜色尺码' &&
                      orderMap[key] != '商品名称' &&
                      orderMap[key] != '国内快递单号' &&
                      orderMap[key] != '拍货日期' &&
                      orderMap[key] != '出货日期' &&
                      orderMap[key] != '结账日期'
                    "
                    style="width: 100%; height: auto; word-wrap: break-word"
                  >
                    <el-input
                      v-model="props.row[key]"
                      style="width: 100%; font-size: 12px"
                      placeholder="请输入"
                      clearable
                    />
                  </div>
                </div>
                <!-- <div class="orderlist-expand-item-text">
                  <div v-if="orderMap[key] === '商品主图'">
                    <el-image
                      :src="imgurls(value)"
                      @click="gobigimg(value)"
                      :preview-src-list="previewSrcList"
                      :initial-index="0"
                      style="width: 80px; cursor: pointer"
                    />
                  </div>
                  <div v-if="orderMap[key] === '其他'">
                    <div class="orderlist-expand-other">
                      <div
                        class="expand-other-item"
                        v-for="(item, index) in value"
                        :key="index"
                      >
                        <div>{{ item.label }}：</div>
                        <div style="margin-top: 2px;font-size: 12px;">{{ item.value }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="orderMap[key] === '颜色尺码' || orderMap[key] === '商品名称' || orderMap[key] === '国内快递单号'">
                    <div class="orderlist-expand-other">
                      <div
                        class="expand-other-item"
                        v-for="(item, index) in value"
                        :key="index"
                      >
                        <div style="margin-top: 2px;font-size: 12px;">{{ item }}</div>
                      </div>
                    </div>
                  </div>
                  <span
                    v-if="
                      orderMap[key] != '其他' && orderMap[key] != '商品主图' && orderMap[key] != '颜色尺码' && orderMap[key] != '商品名称' && orderMap[key] != '国内快递单号'
                    "
                    style="width: 100%; height: auto; word-wrap: break-word;font-size: 12px;"
                    >{{ value }}</span
                  >
                </div> -->
              </div>
            </div>

            <div class="orderlist-button" style="width: 90%">
              <el-button
                type="primary"
                style="width: 20%"
                @click="submitchangeorder(props.row)"
                >提交</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderStutas" label="状态" width="120">
          <template #default="scope">
            <el-select
              v-model="scope.row.orderStutas"
              style="font-size: 12px"
              placeholder="Select"
              @change="changeorderStutas(scope.row)"
            >
              <el-option
                v-for="item in orderStutasSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="recipients" label="收件人" width="100" />
        <el-table-column prop="buygoodsDate" label="拍货日期" width="120" />

        <el-table-column label="商品名称" width="240">
          <template #default="scope">
            <div>
              <div
                v-for="(item, index) in scope.row.goodsName"
                :key="index"
                style="padding: 2px 0"
              >
                <p>{{ item }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="140">
          <template #default="scope">
            <div>
              <div
                v-for="(item, index) in scope.row.colorSize"
                :key="index"
                style="padding: 2px 0"
              >
                <p>{{ item }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="國內快遞單號" width="140">
          <template #default="scope">
            <div>
              <div
                v-for="(item, index) in scope.row.expressNum"
                :key="index"
                style="padding: 2px 0"
              >
                <el-input
                  v-model="scope.row.expressNum[index]"
                  style="width: 120px; font-size: 12px"
                  placeholder="请输入國內快遞單號"
                  clearable
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="hsinchuNum" label="新竹单号/超商" width="140">
          <template #default="scope">
            <div>
              <el-input
                v-model="scope.row.hsinchuNum"
                style="width: 120px; font-size: 12px"
                placeholder="请输入新竹单号/超商"
                clearable
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="collection" label="代收" width="140">
          <template #default="scope">
            <div>
              <el-input
                v-model="scope.row.collection"
                style="width: 120px; font-size: 12px"
                placeholder="请输入代收"
                clearable
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="storename" width="140" label="店名">
          <template #default="scope">
            <div>
              <el-input
                v-model="scope.row.storename"
                style="width: 120px; font-size: 12px"
                placeholder="请输入店名"
                clearable
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="storeNum" width="140" label="店号">
          <template #default="scope">
            <div>
              <el-input
                v-model="scope.row.storeNum"
                style="width: 120px; font-size: 12px"
                placeholder="请输入店号"
                clearable
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="" width="160">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="changeorder(scope.row)"
            >
              修改
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="clickdeleteorder(scope.row.goodsId)"
            >
              删除
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="changeorderStutas(scope.row)"
            >
              保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="orderlist-footer">
      <el-pagination
        v-model:current-page="currentpage"
        v-model:page-size="pagesize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="changeorderdialogVisible"
      title="修改订单信息"
      width="600"
    >
      <div>
        <el-scrollbar style="height: 60vh">
          <el-form
            :model="changeorderdata"
            class="addorder-form"
            label-width="150"
            style="width: 90%"
            ref="ruleFormRef"
            :rules="rules"
          >
            <el-form-item label="拍货日期" prop="buygoodsDate">
              <el-date-picker
                v-model="changeorderdata.buygoodsDate"
                type="date"
                placeholder="请选择拍货日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="销售员" prop="salespersonName">
              <el-input
                class="form-input"
                v-model="changeorderdata.salespersonName"
              />
            </el-form-item>
            <el-form-item label="店名" prop="storename">
              <el-input
                class="form-input"
                v-model="changeorderdata.storename"
              />
            </el-form-item>
            <el-form-item label="接单平台" prop="orderplatform">
              <el-input
                class="form-input"
                v-model="changeorderdata.orderplatform"
              />
            </el-form-item>
            <el-form-item label="订单编号" prop="ordernumber">
              <el-input
                class="form-input"
                v-model="changeorderdata.ordernumber"
              />
            </el-form-item>
            <el-form-item label="收件人" prop="recipients">
              <el-input
                class="form-input"
                v-model="changeorderdata.recipients"
              />
            </el-form-item>
            <el-form-item label="门市地址" prop="address">
              <el-input class="form-input" v-model="changeorderdata.address" />
            </el-form-item>
            <el-form-item label="颜色尺码">
              <!-- <el-input
                class="form-input"
                v-model="changeorderdata.colorSize"
              /> -->
              <div class="expressnums">
                <div class="expressnum-inputs">
                  <el-input
                    v-for="(item, index) in changeorderdata.colorSize"
                    :key="index"
                    class="expressnum-input"
                    v-model="changeorderdata.colorSize[index]"
                  />
                </div>
                <div class="addexpressnum-button">
                  <el-button
                    type="success"
                    @click="changeorderdata.colorSize.push('')"
                    >添加</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item label="数量" prop="num">
              <el-input-number
                v-model="changeorderdata.num"
                :step="1"
                step-strictly
                :min="1"
              />
            </el-form-item>
            <el-form-item label="商品主图" prop="goodsimg">
              <el-input
                style="
                  width: 146px;
                  margin-bottom: 6px;
                  margin-top: 6px;
                  height: 20px;
                  font-size: 11px;
                "
                type="text"
                placeholder="点击粘贴上传图片"
                @paste="handlePaste2"
              />
              <el-upload
                v-if="changeorderdata.goodsimg == ''"
                action="http://47.99.66.117:5500/api/upload"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="getuploadimgsuccess"
              >
                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <div
                class="active-uploadimgs"
                v-if="changeorderdata.goodsimg != ''"
              >
                <img
                  :src="imgurls(changeorderdata.goodsimg)"
                  class="avatar el-upload-list__item-thumbnail"
                  style="height: 148px"
                />
                <el-icon
                  style="margin-left: 20px; cursor: pointer"
                  @click="changeorderdata.goodsimg = ''"
                  ><delete
                /></el-icon>
              </div>
            </el-form-item>
            <el-form-item label="拍货链接" prop="buygoodsUrl">
              <el-input
                class="form-input"
                v-model="changeorderdata.buygoodsUrl"
              />
            </el-form-item>
            <el-form-item label="售價（不含运费）" prop="price">
              <el-input-number
                v-model="changeorderdata.price"
                @change="changepriceFreight"
                :precision="2"
                :min="1"
                :step="10"
              />
            </el-form-item>
            <el-form-item label="运费" prop="freight">
              <el-input-number
                v-model="changeorderdata.freight"
                @change="changepriceFreight"
                :precision="2"
                :min="1"
                :step="10"
              />
            </el-form-item>
            <el-form-item label="售价（含运费）">
              <el-input-number
                v-model="changeorderdata.priceFreight"
                :precision="2"
                :disabled="true"
                :min="1"
                :step="10"
              />
            </el-form-item>
            <el-form-item label="成本" prop="cost">
              <el-input-number
                v-model="changeorderdata.cost"
                :precision="2"
                :min="1"
                :step="10"
              />
            </el-form-item>
            <el-form-item label="结账金额" prop="closingAmount">
              <el-input-number
                v-model="changeorderdata.closingAmount"
                :precision="2"
                :min="1"
                :step="10"
              />
            </el-form-item>
            <!-- <el-form-item label="代收金額（先付的不填）">
              <el-input-number
                v-model="changeorderdata.collectionAmount"
                :precision="2"
                :min="0"
                :step="10"
              />
            </el-form-item> -->
            <el-form-item label="商品名称">
              <!-- <el-input
                class="form-input"
                v-model="changeorderdata.goodsName"
              /> -->
              <div class="expressnums">
                <div class="expressnum-inputs">
                  <el-input
                    v-for="(item, index) in changeorderdata.goodsName"
                    :key="index"
                    class="expressnum-input"
                    v-model="changeorderdata.goodsName[index]"
                  />
                </div>
                <div class="addexpressnum-button">
                  <el-button
                    type="success"
                    @click="changeorderdata.goodsName.push('')"
                    >添加</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input class="form-input" v-model="changeorderdata.phone" />
            </el-form-item>
            <el-form-item label="物流方式" prop="logistics">
              <el-input
                class="form-input"
                v-model="changeorderdata.logistics"
              />
            </el-form-item>
            <el-form-item label="出货日期" prop="shippingDate">
              <!-- <el-input v-model="changeorderdata.shippingDate" /> -->
              <el-date-picker
                v-model="changeorderdata.shippingDate"
                type="date"
                placeholder="请选择出货日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item label="国内快递单号">
              <!-- <el-input
                class="form-input"
                v-model="changeorderdata.expressNum"
              /> -->
              <div class="expressnums">
                <div class="expressnum-inputs">
                  <el-input
                    v-for="(item, index) in changeorderdata.expressNum"
                    :key="index"
                    class="expressnum-input"
                    v-model="changeorderdata.expressNum[index]"
                  />
                </div>
                <div class="addexpressnum-button">
                  <el-button type="success" @click="addexpressnum"
                    >添加</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <el-form-item label="快递公司" prop="expressCompanies">
              <el-input
                class="form-input"
                v-model="changeorderdata.expressCompanies"
              />
            </el-form-item>
            <el-form-item label="新竹单号/超商" prop="hsinchuNum">
              <el-input
                class="form-input"
                v-model="changeorderdata.hsinchuNum"
              />
            </el-form-item>
            <el-form-item label="店号" prop="storeNum">
              <el-input class="form-input" v-model="changeorderdata.storeNum" />
            </el-form-item>
            <el-form-item label="代收（做拍货当天就完善）" prop="expressNum">
              <el-input
                class="form-input"
                v-model="changeorderdata.collection"
              />
            </el-form-item>
            <el-form-item label="品名" prop="productName">
              <el-input
                class="form-input"
                v-model="changeorderdata.productName"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                class="form-input"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                v-model="changeorderdata.remarks"
              />
            </el-form-item>
            <el-form-item label="重量">
              <el-input class="form-input" v-model="changeorderdata.weight" />
            </el-form-item>
            <el-form-item class="order-addother">
              <div
                v-if="changeorderdata.other.length == 0"
                class="addother-orderbuttons"
              >
                <el-button type="primary" plain @click="addotheritem()"
                  >添加其他内容</el-button
                >
              </div>
              <div v-else class="addother-ordertest">
                <div class="othertest-content">
                  <div class="othertest-content-title">自定义内容</div>
                  <div class="othertest-list">
                    <div
                      class="othertest-item"
                      v-for="(item, index) in changeorderdata.other"
                      :key="index"
                    >
                      <el-input
                        v-model="item.label"
                        style="width: 130px"
                        placeholder="请输入字段名"
                      />
                      <div style="padding: 0 5px">：</div>
                      <el-input
                        v-model="item.value"
                        style="width: 50%"
                        placeholder="请输入字段内容"
                      />
                      <div
                        style="margin-left: 10px; cursor: pointer"
                        @click="deleteotheritem(index)"
                      >
                        <el-icon><delete /></el-icon>
                      </div>
                    </div>
                  </div>
                  <div class="addother-orderbuttons">
                    <el-button type="primary" plain @click="addotheritem()"
                      >添加其他内容</el-button
                    >
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="changeorderdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="getchangeorderItem(ruleFormRef)">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="selectexportmapVisible"
      title="选择导出字段"
      width="500"
    >
      <div class="selectexport">
        <el-scrollbar height="350px">
          <div class="selectexport-content">
            <el-checkbox
              v-model="checkAll"
              border
              :indeterminate="isIndeterminate"
              @change="exportmapCheckAllChange"
            >
              全选
            </el-checkbox>
            <el-checkbox-group v-model="checkedMaps" class="selectexportmaps">
              <el-checkbox
                v-for="(item, index) in selectexportmapData"
                :key="index"
                :label="item.label"
                :value="item.value"
                border
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeexportmap">取消</el-button>
          <el-button type="primary" @click="submitexportmap"> 导出 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, reactive, onMounted, inject } from "vue";
import { useSaveApi } from "@/api/user/index.ts";
import {
  addordergoods,
  saveOrderlist,
  deleteOrder,
  changeordergoods,
  saveAllOrderlist,
} from "@/api/order/index.ts";
import { ElMessage, ElMessageBox } from "element-plus";

import axios from "axios";

import { ipc } from "@/utils/ipcRenderer";
import { ipcApiRoute } from "@/api/main.js";

import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";

import type {
  UploadFile,
  UploadInstance,
  UploadProps,
  UploadRawFile,
  UploadFiles,
  FormInstance,
  FormRules,
} from "element-plus";

// const currentUserfun  = inject('currentUserfun')

const userdataOptions = ref([]);
const orderListdata = ref([]);
const keywordsform = ref({
  userId: "",
  keyword: "",
  buygoodsDate: "",
  shippingDate: "",
  specialtype: "",
  expressNum: "",
  isadmin: 1,
});
const changeorderdata = ref<any>({});
const activeuser = ref({});

interface RuleForm {
  buygoodsDate: string;
  salespersonName: string;
  storename: string;
  orderplatform: string;
  ordernumber: string;
  recipients: string;
  address: string;
  colorSize: string;
  num: number;
  goodsimg: string;
  buygoodsUrl: string;
  price: number;
  freight: number;
  priceFreight: number;
  cost: number;
  closingAmount: number;
  collectionAmount: number;
  goodsName: string;
  phone: string;
  logistics: string;
  shippingDate: string;
  expressNum: string;
  expressCompanies: string;
  hsinchuNum: string;
  storeNum: string;
  collection: string;
  productName: string;
  remarks: string;
  weight: string;
  other: any;
  userId: number;
}
const rules = reactive<FormRules<RuleForm>>({
  buygoodsDate: [
    {
      required: true,
      message: "请选择拍货日期",
      trigger: "change",
    },
  ],
  salespersonName: [
    {
      required: true,
      message: "请输入销售员",
      trigger: "blur",
    },
  ],
  storename: [
    {
      required: true,
      message: "请输入店名",
      trigger: "blur",
    },
  ],
  orderplatform: [
    {
      required: true,
      message: "请输入接单平台",
      trigger: "blur",
    },
  ],
  ordernumber: [
    {
      required: true,
      message: "请输入订单编号",
      trigger: "blur",
    },
  ],
  recipients: [
    {
      required: true,
      message: "请输入收件人",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "请输入门市地址",
      trigger: "blur",
    },
  ],
  colorSize: [
    {
      required: true,
      message: "请输入颜色尺码",
      trigger: "blur",
    },
  ],
  num: [{ required: true, message: "请输入数量", trigger: "blur" }],
  goodsimg: [
    {
      required: true,
      message: "请上传商品主图",
      trigger: "blur",
    },
  ],
  buygoodsUrl: [
    {
      required: true,
      message: "请输入拍货链接",
      trigger: "blur",
    },
  ],
  price: [
    { required: true, message: "请输入售價（不含运费）", trigger: "blur" },
  ],
  freight: [{ required: true, message: "请输入运费", trigger: "blur" }],
  cost: [{ required: true, message: "请输入成本", trigger: "blur" }],
  closingAmount: [
    { required: true, message: "请输入结账金额", trigger: "blur" },
  ],
  goodsName: [
    {
      required: true,
      message: "请输入商品名称",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入电话",
      trigger: "blur",
    },
  ],
  logistics: [
    {
      required: true,
      message: "请输入物流方式",
      trigger: "blur",
    },
  ],
  shippingDate: [
    {
      required: true,
      message: "请输入出货日期",
      trigger: "blur",
    },
  ],
  expressNum: [
    {
      required: true,
      message: "请输入国内快递单号",
      trigger: "blur",
    },
  ],
  expressCompanies: [
    {
      required: true,
      message: "请输入快递公司",
      trigger: "blur",
    },
  ],
  hsinchuNum: [
    {
      required: true,
      message: "请输入新竹单号/超商",
      trigger: "blur",
    },
  ],
  storeNum: [
    {
      required: true,
      message: "请输入店号",
      trigger: "blur",
    },
  ],
  productName: [
    {
      required: true,
      message: "请输入品名",
      trigger: "blur",
    },
  ],
});
const ruleFormRef = ref<FormInstance>();
const changeorderdialogVisible = ref(false);

const specialoption = ref([
  {
    value: "1",
    label: "多国内快递单号",
  },
]);
const pagesize = ref(20);
const currentpage = ref(1);
const total = ref(0);

const orderStutasSelect = ref([
  {
    value: 1,
    label: "待处理",
  },
  {
    value: 2,
    label: "有问题",
  },
  {
    value: 3,
    label: "已处理",
  },
  {
    value: 4,
    label: "已出库",
  },
]);

const orderMap = ref({
  buygoodsDate: "拍货日期",
  salespersonName: "销售员",
  // orderStutas: "状态",
  storename: "店名",
  orderplatform: "接单平台",
  ordernumber: "订单编号",
  recipients: "收件人",
  address: "门市地址",
  colorSize: "颜色尺码",
  num: "数量",
  goodsimg: "商品主图",
  buygoodsUrl: "拍货链接",
  price: "售價（不含运费）",
  freight: "运费",
  priceFreight: "售价（含运费）",
  cost: "成本",
  closingAmount: "结账金额",
  checkoutTime: "结账日期",
  goodsName: "商品名称",
  phone: "电话",
  logistics: "物流方式",
  shippingDate: "出货日期",
  expressNum: "国内快递单号",
  expressCompanies: "快递公司",
  hsinchuNum: "新竹单号/超商",
  storeNum: "店号",
  collection: "代收（做拍货当天就完善）",
  productName: "品名",
  remarks: "备注",
  weight: "重量",
  other: "其他",
});

const exportloading = ref(false);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const selectexportmapVisible = ref(false);
const selectexportmapData = ref([]);
const exportdatas = ref([]);

const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedMaps = ref([]);

const expandRowKeys = ref([]);

const previewSrcLis = ref([
  "http://47.99.66.117:3307/imagest//uploads/lutianorder/20240621/lutianorderImg-1718901335623-2.jpg",
]);

const getallUser = () => {
  useSaveApi().then((res) => {
    if (res.code == 200) {
      res.data.forEach((item) => {
        let a = {
          label: item.username,
          value: item.userId,
        };
        userdataOptions.value.push(a);
      });
    }
  });
};

const handleExpandChange = (row, expandedRows) => {
  if (expandedRows.length > 0) {
    // 获取最新展开的行的索引
    const latestExpandedIndex = expandedRows[expandedRows.length - 1].index;
    // 更新 expandRowKeys，只保留最新展开的行的索引
    expandRowKeys.value = [latestExpandedIndex];
  } else {
    expandRowKeys.value = [];
  }
};

// 获取列表数据
const saveorderList = () => {
  let params = JSON.parse(JSON.stringify(keywordsform.value));
  params.pagesize = pagesize.value;
  params.currentpage = currentpage.value;
  saveOrderlist(params).then((res) => {
    if (res.code == 200) {
      orderListdata.value = res.data;

      total.value = res.total;
      orderListdata.value.forEach((item, index) => {
        item.index = index;
        item.other = JSON.parse(item.other);
        item.colorSize = JSON.parse(item.colorSize);
        item.goodsName = JSON.parse(item.goodsName);
        item.expressNum = JSON.parse(item.expressNum);
      });
      // console.log(orderListdata.value);
    }
  });
};

const clickdeleteorder = (goodsId) => {
  ElMessageBox.confirm("是否删除订单?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let params = {
        goodsId: goodsId,
      };
      deleteOrder(params).then((res) => {
        if (res.code == 200) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          saveorderList();
        } else {
          ElMessage.error("删除失败");
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const changeorder = (row) => {
  changeorderdata.value = JSON.parse(JSON.stringify(row));
  // let a = row.expressNum.split(",");

  // let b = [];
  // a.forEach((item) => {
  //   let c = {
  //     value: item,
  //   };
  //   b.push(c);
  // });
  // changeorderdata.value.expressNum = b;
  // console.log(changeorderdata.value);

  changeorderdialogVisible.value = true;
};

const imgurls = (goodsimg) => {
  return `http://47.99.66.117:3307/imagest/${goodsimg}`;
};

const gobigimg = (goodsimg) => {
  // previewSrcLis.value = []
  // previewSrcLis.value.push(imgurls(goodsimg))
  // // console.log(previewSrcLis.value);
};

const addotheritem = () => {
  let a = {
    label: "",
    value: "",
  };
  changeorderdata.value.other.push(a);
};

const getuploadimgsuccess2 = (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  // console.log(response);
  if (response.code == 200) {
    ElMessage({
      message: "图片上传成功",
      type: "success",
    });
    // changeorderdata.value.goodsimg = response.data.url;

    orderListdata.value[expandRowKeys.value[0]].goodsimg = response.data.url;
  }
};

const handlePaste = (event) => {
  const items = (event.clipboardData || event.originalEvent.clipboardData)
    .items;
  for (const item of items) {
    if (item.kind === "file") {
      const file = item.getAsFile();
      if (file) {
        uploadFile(file, 1);
      }
    }
  }
};

const handlePaste2 = (event) => {
  const items = (event.clipboardData || event.originalEvent.clipboardData)
    .items;
  for (const item of items) {
    if (item.kind === "file") {
      const file = item.getAsFile();
      if (file) {
        uploadFile(file, 2);
      }
    }
  }
};

const uploadFile = (file, num) => {
  const formData = new FormData();
  formData.append("file", file);

  // 发起上传请求
  // 这里假设使用 axios 进行上传
  axios
    .post("http://47.99.66.117:5500/api/upload", formData)
    .then((response) => {
      // console.log("Upload success:", response.data);
      if (response.data.code == 200) {
        ElMessage({
          message: "图片上传成功",
          type: "success",
        });
        if (num == 1) {
          orderListdata.value[expandRowKeys.value[0]].goodsimg =
            response.data.data.url;
        } else {
          changeorderdata.value.goodsimg = response.data.data.url;
        }
      }
      // 处理上传成功的逻辑
      // 可以将上传成功后的 URL 设置到 pasteImageUrl 中
      // pasteImageUrl.value = response.data.url;
    })
    .catch((error) => {
      console.error("Upload error:", error);
      // 处理上传失败的逻辑
    });
};
const getuploadimgsuccess = (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  // console.log(response);
  if (response.code == 200) {
    ElMessage({
      message: "图片上传成功",
      type: "success",
    });
    changeorderdata.value.goodsimg = response.data.url;
  }
};
const deleteotheritem = (index) => {
  ElMessageBox.confirm("是否删除当前字段", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      changeorderdata.value.other.splice(index, 1);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const getchangeorderItem = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let otherarr = changeorderdata.value.other;
      let expressNumarr = changeorderdata.value.expressNum.filter(
        (item) => item !== ""
      );
      let otherstatus = 0;
      otherarr.forEach((item) => {
        if (item.value == "" || item.label == "") {
          ElMessage({
            message: "请完善自定义字段",
            type: "warning",
            plain: true,
          });
          otherstatus = 1;
          return;
        }
      });

      // changeorderdata.value.expressNum.forEach((item) => {
      //   if (item.value != "") {
      //     expressNumarr.push(item.value);
      //   }
      // });

      // if (expressNumarr.length == 0) {
      //   ElMessage({
      //     message: "请填写最少一个国内快递单号",
      //     type: "warning",
      //     plain: true,
      //   });
      //   otherstatus = 1;
      //   return;
      // }

      // if (otherstatus == 0) {
      let neworderdorm = JSON.parse(JSON.stringify(changeorderdata.value));
      neworderdorm.other = JSON.stringify(changeorderdata.value.other);
      neworderdorm.changeTime = getformattedDate();
      neworderdorm.expressNum = JSON.stringify(expressNumarr);
      neworderdorm.colorSize = JSON.stringify(
        changeorderdata.value.colorSize.filter((item) => item !== "")
      );
      neworderdorm.goodsName = JSON.stringify(
        changeorderdata.value.goodsName.filter((item) => item !== "")
      );
      if (expressNumarr.length > 1) {
        neworderdorm.specialtype = "1";
      } else {
        neworderdorm.specialtype = "0";
      }
      delete neworderdorm.index;
      // console.log(neworderdorm);

      changeordergoods(neworderdorm).then((res) => {
        if (res.code == 200) {
          ElMessage({
            message: "订单修改成功",
            type: "success",
          });
          changeorderdialogVisible.value = false;
          saveorderList();
        } else {
          ElMessage({
            message: "订单修改失败",
            type: "warning",
            plain: true,
          });
        }
        // console.log(res);
      });
      // }
    } else {
      ElMessage({
        message: "请填入必填项",
        type: "warning",
        plain: true,
      });
    }
  });
};

// 获取当前的时间戳
const getformattedDate = () => {
  let currentTimestamp = Date.now();

  // 将时间戳转换为Date对象
  let date = new Date(currentTimestamp);

  // 获取UTC时间的各个部分
  let year = date.getUTCFullYear();
  let month = date.getUTCMonth() + 1; // 月份从0开始，需要加1
  let day = date.getUTCDate();
  let hours = date.getUTCHours();
  let minutes = date.getUTCMinutes();
  let seconds = date.getUTCSeconds();

  // 北京时间是UTC+8
  hours += 8;
  // 调整小时和日期
  if (hours >= 24) {
    hours -= 24;
    day += 1;
    // 如果天数超过本月最大天数，需要调整月份和年份
    let daysInMonth = new Date(year, month, 0).getDate();
    if (day > daysInMonth) {
      day = 1;
      month += 1;
      if (month > 12) {
        month = 1;
        year += 1;
      }
    }
  }
  // 格式化日期和时间部分
  let formattedDate = `${year}-${String(month).padStart(2, "0")}-${String(
    day
  ).padStart(2, "0")} ${String(hours).padStart(2, "0")}:${String(
    minutes
  ).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;

  return formattedDate;
};

const addexpressNum2 = (value) => {
  value.push("");
};

const addother = (value) => {
  let a = {
    label: "",
    value: "",
  };
  value.push(a);
};

const changepriceFreight = () => {
  changeorderdata.value.priceFreight =
    changeorderdata.value.price + changeorderdata.value.freight;
};

const handleCurrentChange = () => {
  // console.log(currentpage);
  saveorderList();
};

// 导出
const exportExcel = () => {
  // exportloading.value = true;
  let params = JSON.parse(JSON.stringify(keywordsform.value));
  // 查询全部订单
  saveAllOrderlist(params).then((res) => {
    if (res.code == 200) {
      // console.log(res.data);
      let exportdata = res.data;
      exportdatas.value = res.data;
      let allFields = [];

      // 遍历数组对象，获取所有字段名
      exportdata.forEach((obj) => {
        const fields = Object.keys(obj);
        allFields = allFields.concat(fields);

        let other = JSON.parse(obj.other);
        let b = [];
        other.forEach((item) => {
          b.push(item.label);
        });

        allFields = allFields.concat(b);
      });

      // 使用 Set 对数组进行去重
      const uniqueFields = [...new Set(allFields)];
      let itemsToRemove = [
        "goodsId",
        "userId",
        "createrTime",
        "changeTime",
        "specialtype",
        "collectionAmount",
        "other",
      ];

      let filteredArr = uniqueFields.filter(function (item) {
        return !itemsToRemove.includes(item);
      });

      let selectexportmaps = [];

      filteredArr.forEach((item) => {
        if (item != "orderStutas") {
          let label = orderMap.value[item];
          let c = {
            label: label,
            value: item,
          };
          if (label == undefined) {
            c = {
              label: item,
              value: item,
            };
          }
          selectexportmaps.push(c);
        }
      });

      selectexportmapVisible.value = true;
      // console.log(selectexportmaps);
      selectexportmapData.value = selectexportmaps;

      checkedMaps.value = [
        "buygoodsDate",
        "salespersonName",
        "storename",
        "orderplatform",
        "ordernumber",
        "recipients",
        "address",
        "colorSize",
        "num",
        "goodsimg",
        "buygoodsUrl",
        "price",
        "freight",
        "priceFreight",
        "cost",
        "closingAmount",
        "checkoutTime",
        "goodsName",
        "phone",
        "logistics",
        "shippingDate",
        "expressNum",
        "expressCompanies",
        "hsinchuNum",
        "storeNum",
        "collection",
        "productName",
        "remarks",
        "weight",
      ];

      //   ipc
      //     .invoke(ipcApiRoute.exportExcel, {
      //       data: JSON.stringify(exportdata),
      //     })
      //     .then(async (r) => {
      //       // // console.log(r);
      //       exportloading.value = false;
      //       if (r == "保存成功") {
      //         ElMessage({
      //           message: "导出成功",
      //           type: "success",
      //         });
      //       } else {
      //         ElMessage.error("导出失败");
      //       }
      //     });
    }
  });
};

const orderexpandHtml = (row) => {
  if (Object.keys(row).length === 0) {
    return "";
  } else {
    const {
      goodsId,
      userId,
      createrTime,
      changeTime,
      specialtype,
      index,
      collectionAmount,
      orderStutas,
      ...filtered
    } = row;
    // // console.log(filtered);

    return filtered;
  }
};

const addexpressnum = () => {
  changeorderdata.value.expressNum.push("");
};

const exportmapCheckAllChange = (val) => {
  let values = selectexportmapData.value.map(function (obj) {
    return obj.value;
  });
  checkedMaps.value = val ? values : [];
  isIndeterminate.value = false;
};

const closeexportmap = () => {
  isIndeterminate.value = true;
  selectexportmapData.value = [];
  selectexportmapVisible.value = false;
  exportdatas.value = [];
};

const submitexportmap = () => {
  if (checkedMaps.value.length != 0) {
    exportloading.value = true;
    selectexportmapVisible.value = false;
    let a = [];
    checkedMaps.value.forEach((item) => {
      selectexportmapData.value.forEach((item2) => {
        if (item == item2.value) {
          a.push(item2);
        }
      });
    });
    // console.log(exportdatas.value);
    // console.log(a);

    ipc
      .invoke(ipcApiRoute.exportExcel, {
        data: JSON.stringify(exportdatas.value),
        exportmap: JSON.stringify(a),
      })
      .then(async (r) => {
        // // console.log(r);
        exportloading.value = false;
        if (r == "保存成功") {
          ElMessage({
            message: "导出成功",
            type: "success",
          });
        } else {
          ElMessage.error("导出失败");
        }
      });
  } else {
    ElMessage({
      message: "请选择导出字段",
      type: "warning",
    });
  }
};

const submitchangeorder = (row) => {
  // console.log(row);
  ElMessageBox.confirm("请确保当前信息已填写无误", "提示", {
    confirmButtonText: "继续",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let expressNumarr = row.expressNum.filter(
        (item) => item !== ""
      );
      let copyrow = JSON.parse(JSON.stringify(row));
      copyrow.other = JSON.stringify(row.other);
      copyrow.changeTime = getformattedDate();
      copyrow.expressNum = JSON.stringify(expressNumarr);
      copyrow.colorSize = JSON.stringify(
        row.colorSize.filter((item) => item !== "")
      );

      copyrow.goodsName = JSON.stringify(
        row.goodsName.filter((item) => item !== "")
      );

      delete copyrow.index;
      if (row.expressNum.length > 1) {
        copyrow.specialtype = "1";
      } else {
        copyrow.specialtype = "0";
      }
      // console.log(copyrow);

      changeordergoods(copyrow).then((res) => {
        if (res.code == 200) {
          ElMessage({
            message: "订单修改成功",
            type: "success",
          });
        } else {
          ElMessage({
            message: "订单修改失败",
            type: "warning",
            plain: true,
          });
        }
        // // console.log(res);
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const orderListrowStyle = ({ row, rowIndex }) => {
  if (row.orderStutas == 1) {
    return { background: "#fff" };
  } else if (row.orderStutas == 2) {
    return { background: "#E6A23C" };
  } else if (row.orderStutas == 3) {
    return { background: "#67C23A" };
  } else if (row.orderStutas == 4) {
    return { background: "#909399" };
  }
};

const changeorderStutas = (row) => {
  // console.log(row);
  submitchangeorder(row);
};

onMounted(() => {
  activeuser.value = JSON.parse(localStorage.getItem("currentUserstr"));
  keywordsform.value.isadmin = activeuser.value.isadmin;

  userdataOptions.value = [];
  // // console.log(keywordsform.value.isadmin);

  if (keywordsform.value.isadmin == 0) {
    keywordsform.value.userId = activeuser.value.userId;
  }

  if (keywordsform.value.isadmin == 1 || keywordsform.value.isadmin == 2) {
    getallUser();
  }
  saveorderList();
});
</script>
  
  <style scoped>
.orderlist {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.orderlist-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #dcdfe6;
}
.orderlist-title {
  font-size: 16px;
  font-weight: bold;
}
.adduser-button {
  font-size: 12px;
}
.orderlist-content {
  padding: 10px 0;
  flex: 1;
}
.orderlist-footer {
  height: 40px;
  display: flex;
  justify-content: center;
}

.userbuttons {
  width: 100%;
  display: flex;
}

.other-orderdiv {
  display: flex;
  flex-direction: column;
  padding: 5px;
  font-size: 12px;
  width: 100%;
  /* border: 1px solid red;
    height: 80px; */
}

.other-orderdiv-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addother-orderbuttons {
  width: 100%;
  height: 50px;
}
.addother-orderbuttons .el-button {
  width: 80%;
  height: 50px;
}
.addother-ordertest {
  width: 100%;
  border: 1px dashed #dcdfe6;
  border-radius: 5px;
  /* margin-left: 80px; */
}
.othertest-content {
  padding: 10px 0;
}
.othertest-item {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.othertest-content-title {
  display: flex;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
}

.orderlist-expand {
  display: flex;
  flex-wrap: wrap;
  padding: 0 50px;
}
.orderlist-expand-item {
  width: 45%;
  display: flex;

  align-items: flex-start;
  /* border: ; */
}
.orderlist-expand-item:nth-child(even) {
  border-right: 1px solid #d4d7de;
  border-top: 1px solid #d4d7de;
}
.orderlist-expand-item:nth-child(odd) {
  border-right: 1px solid #d4d7de;
  border-left: 1px solid #d4d7de;
  border-top: 1px solid #d4d7de;
}
.orderlist-expand-item:nth-last-child(1),
.orderlist-expand-item:nth-last-child(2) {
  border-bottom: 1px solid #d4d7de;
}

/* border-right: 1px solid #D4D7DE; */
.orderlist-expand-item-text {
  display: flex;
  font-size: 13px;
  align-items: center;
  margin-left: 10px;
  margin-top: 1px;
  width: 65%;
  padding: 10px 10px;
}
.orderlist-expand-item-title {
  font-size: 13px;
  font-weight: bold;
  display: flex;
  width: 30%;
  height: 100%;
  border-right: 1px solid #e4e7ed;
  padding: 10px 10px;
}

.orderlist-expand-other {
  display: flex;
  flex-direction: column;
}
.expand-other-item {
  display: flex;
  align-items: center;
}

.expressnums {
  display: flex;
  align-items: flex-end;
  justify-content: start;
  width: 100%;
}
.expressnum-inputs {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.expressnum-input {
  width: 100%;
  margin-bottom: 10px;
}
.addexpressnum-button {
  margin-left: 15px;
  margin-bottom: 10px;
}

.orderlist-button {
  display: flex;
  justify-content: center;
  padding: 15px 0;
}
</style>

<style>
.orderlist-keywords-form {
  display: flex;
  flex-wrap: wrap;
}
.orderlist-keywords-form .el-form-item {
  margin: 0 15px 0 0;
  padding: 8px 0;
}

.orderlist-keywords-form .el-form-item .el-form-item__label {
  font-size: 13px;
}

.orseruserid-select .el-select-dropdown__item {
  font-size: 13px;
}
.orseruserid-selectinput .el-select__wrapper {
  font-size: 13px;
}
.orderlisttabel .el-scrollbar__view {
  width: 100%;
}

.selectexport-content {
  display: flex;
  flex-direction: column;
}

.selectexport-content .selectexportmaps {
  display: flex;
  flex-wrap: wrap;
}
.selectexport-content .selectexportmaps .el-checkbox {
  width: 43%;
  margin: 10px 0;
  margin-right: 10px;
}

.addorder-form .el-input {
  font-size: 12px !important;
}
</style>